import {messages} from "share/common";
import React from 'react'
import { connect } from 'react-redux'
import { Form, Table, Popconfirm, message } from 'antd'

import { SelectDepOrPerson } from 'components/index'
import baseService from 'share/base.service'
import RSService from 'containers/setting/role-setting/role-setting.service'
import 'styles/setting/role-setting/finance-role/finance-role-detail.scss'
import ResizeTable from "components/resize-table";

class DetailAssignCenter extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      columns: [
        {title: messages('common.sequence'), dataIndex: 'index', width: '5%', render: (value, record, index) => this.state.pageSize * this.state.page + index + 1},
        {title: messages('setting.key900'/*工号*/), dataIndex: 'employeeId'},
        {title: messages('setting.key901'/*姓名*/), dataIndex: 'fullName'},
        {title: messages('setting.key902'/*部门*/), dataIndex: 'departmentName'},
        {title: messages('common.operation'), dataIndex: 'userOID', width: '10%', render: value => (
          <Popconfirm onConfirm={() => this.handleDelete(value)} title={messages('common.confirm.delete')}>
            <a onClick={e => {e.preventDefault();e.stopPropagation()}}>{messages('common.delete')}</a>
          </Popconfirm>
        )},
      ],
      data: [],
      page: 0,
      pageSize: 10,
      pagination: {
        total: 0
      },
    }
  }

  componentDidMount() {
    this.getList()
  }

  getList = () => {
    const { page, pageSize } = this.state;
    this.setState({ loading: true });
    RSService.getAssignUsers(this.props.roleOID, page, pageSize).then(res => {
      this.setState({
        loading: false,
        data: res.data,
        pagination: {
          total: Number(res.headers['x-total-count']) || 0,
          onChange: this.onChangePager,
          current: this.state.page + 1
        }
      })
    })
  };

  onChangePager = (page) => {
    if (page - 1 !== this.state.page)
      this.setState({ page: page - 1 }, () => {
        this.getList()
      })
  };

  handleAdd = (values) => {
    let params = {roleOID: this.props.roleOID};
    let userOIDs = [];
    values.map(item => {
      userOIDs.push(item.userOID)
    });
    params.userOIDs = userOIDs;
    RSService.createAssignUsers(params).then(() => {
      message.success(messages('common.save.success', {name: ''}));
      this.getList();
      baseService.getUser()
    })
  };

  handleDelete = (userOID) => {
    let params = {
      roleOID: this.props.roleOID,
      userOIDs: [userOID]
    };
    this.setState({ loading: true });
    RSService.deleteAssignUsers(params).then(() => {
      message.success(messages('common.delete.success', {name: ''}));
      this.getList();
      baseService.getUser()
    }).catch(() => {
      this.setState({ loading: false })
    })
  };

  render() {
    const { loading, columns, data, pagination } = this.state;
    return (
      <div className="detail-assign-user">
        <div className="table-header">
          <div className="table-header-buttons">
            <SelectDepOrPerson buttonType="primary"
                               title={messages('common.add')}
                               onlyPerson={true}
                               isClickSearchHide={false}
                               externalParams={{financeRoleOID: this.props.roleOID}}
                               onConfirm={this.handleAdd}/>
          </div>
          <div className="table-header-title">{messages('common.total', {total: pagination.total})}</div>
        </div>
        <ResizeTable
          rowKey='userOID'
          loading={loading}
          columns={columns}
          dataSource={data}
          pagination={pagination}
          size="middle"
          bordered
        />
      </div>
    )
  }
}

DetailAssignCenter.propTypes = {
  roleBaseInfo: React.PropTypes.object,
  roleOID: React.PropTypes.string,
};

DetailAssignCenter.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    profile: state.login.profile,
  }
}

const wrappedDetailAssignCenter = Form.create()(DetailAssignCenter);

export default connect(mapStateToProps)(wrappedDetailAssignCenter)
